<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#wrapper{
			width: 600px;

			margin: 100px auto;
		}
		#ulbox{
			height: 1000px;
		}
		#ulbox li{
			user-select: none;
			list-style: none;
			width: 150px;
			height: 150px;
			float: left;
			margin: 10px;
			background: #111;
			color: #fff;
			font-size: 24px;
			text-align: center;
			line-height: 150px;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<ul id="ulbox">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
		</ul>
	</div>
	<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		window.onload = function(){
			var uldom = document.getElementById('ulbox');
			var arr = [];
			var index = 1;
			var lidoms = uldom.children;
			for(var i=0; i<lidoms.length; i++){
				var ot = lidoms[i].offsetTop;
				var ol = lidoms[i].offsetLeft;
				lidoms[i].style.top = ot + "px";
				lidoms[i].style.left = ol + "px";
				arr.push({"lit": ot, "lil": ol});
				lidoms[i].index = i;
			}
			for(var i=0; i<lidoms.length; i++){
				lidoms[i].style.position = "absolute";
			}

			for(var i=0; i<lidoms.length; i++){
				lidoms[i].onmousedown = function(e){
					index++;
					console.log(arr[this.index])
					var ev = e || window.event;
					var self = this;
					var mouseX = ev.clientX - this.offsetLeft;
					var mouseY = ev.clientY - this.offsetTop;
					this.style.zIndex = index;
					// console.log(this.offsetLeft +"============"+ mouseX +"=============="+ev.clientX)
					document.onmouseover = function(e){
						var ev = e || window.event;
						self.style.top = (ev.clientY - mouseY) + "px";
						self.style.left = (ev.clientX - mouseX) + "px";
						var nearLi = juli(self);
						//如果找到了就给元素添加背景色
						if(nearLi){
							nearLi.style.background = "red";
						}
					}
					document.onmouseup = function(){
						var temindex = 0
						var tempArr = null;
						document.onmouseover = null;
						var nearLi = juli(self);
						console.log(nearLi.index)
						//如果找到了就给元素添加背景色
						if(nearLi){
							//nearLi.style.background = "red";
							$(self).animate({"top":arr[nearLi.index].lit, "left":arr[nearLi.index].lil});
							$(nearLi).animate({"top":arr[self.index].lit, "left":arr[self.index].lil});
							
							tempArr = arr[nearLi.index]
							arr[nearLi.index] = arr[self.index];
							arr[self.index] = tempArr;
							//调换索引为什么不行
							// temindex = self.index;
							// self.index = nearLi.index;
							// nearLi.index = temindex;
							// arr[nearLi.index] = arr[dom.index];
							// 	arr[dom.index] = tempArr;
							// 	dom.index = nearLi.index;
							// 	nearLi.index = index;
							// console.log(arr)
						}
					}
				}
			}

			function pengzhuan(tarDom, curDom){
				var L = tarDom.offsetLeft;
				var T = tarDom.offsetTop;
				var B = tarDom.offsetTop + tarDom.offsetHeight;
				var R = tarDom.offsetLeft + tarDom.offsetWidth;

				var L2 = curDom.offsetLeft;
				var T2 = curDom.offsetTop;
				var B2 = curDom.offsetTop + curDom.offsetHeight;
				var R2 = curDom.offsetLeft + curDom.offsetWidth;
				//没有碰撞情况
				if(L > R2 || T > B2 || R <L2 || B < T2){
					return true;
				}else{
					return false;
				}
			}

			function juli(tarDom){
				var value = Number.MAX_VALUE;
				var index = -1;
				for(var i=0; i<lidoms.length; i++){
					if(!pengzhuan(tarDom, lidoms[i]) && tarDom != lidoms[i]){
						lidoms[i].style.background = "red";
						var a = tarDom.offsetLeft - lidoms[i].offsetLeft;
						var b = tarDom.offsetTop -lidoms[i].offsetTop;
						var c = Math.sqrt(a*a+b*b);
						if(c<value){
							value = c;
							index = lidoms[i].index;
						}
					}
				}
				if(index!=-1){
					return lidoms[index];
				}else{
					return false;
				}	
			}
		}
	</script>
</body>
</html>